<template>
	<BasePopup
		v-model="localVisible"
		titleT="agent.activity.CreateCampaign"
		titleIcon="dialog-create"
		@close="handleClose">
		<div class="pt-[28px] px-[35px] pb-[53px]">
			<!-- 表单内容 -->
			<n-form @keyup.enter="handleSubmit">
				<n-form-item :label="$t('agent.activity.CampaignName')">
					<BaseInput
						v-model="campaignName"
						class="w-full"
						:placeholder="$t('agent.activity.EnterCampaignName')"
						size="large" />
				</n-form-item>
				<n-form-item :label="$t('agent.activity.CampaignCode')">
					<BaseInput
						v-model="campaignCode"
						size="large"
						class="w-full"
						:placeholder="$t('agent.activity.EnterCampaignCode')" />
				</n-form-item>
			</n-form>
			<BaseButton
				:disabled="!isFormValid || loading"
				type="primary"
				size="large"
				block
				@click="handleSubmit"
				:loading="loading"
				class="button-create">
				{{ $t('agent.activity.CreateCampaign') }}
			</BaseButton>
		</div>
	</BasePopup>
</template>

<script setup lang="ts">
import { showError, showSuccess, showWarning } from '@/utils'
import { ref, defineProps, defineEmits, watch, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { createCampaign } from '@/api/agent'
import { useProfileStore } from '@/store'
import { BaseButton, BasePopup, BaseInput } from '@/components/base'

const profileStore = useProfileStore()
const userId = ref<number>()
const userInfo = ref(profileStore.userInfo)
if (userInfo.value) {
	userId.value = userInfo.value.id || 0
}

// 使用国际化
const { t } = useI18n()

const loading = ref(false)

// 接收父组件传递的 isVisible 属性
const props = defineProps({
	isVisible: {
		type: Boolean,
		default: false
	},
	getCode: {
		type: String,
		default: ''
	}
})

// 本地状态，用于控制对话框的显示
const localVisible = ref(props.isVisible)

// 定义 emit 事件
const emit = defineEmits(['update:isVisible', 'submit'])

const campaignName = ref('')
const campaignCode = ref('')

watch(
	() => props.getCode,
	(val: string) => {
		campaignCode.value = val
	}
)

// // 计算对话框样式，基于屏幕大小调整宽度
// const modalStyle = computed(() => {
// 	const isMobile = window.innerWidth <= 768
// 	return {
// 		width: isMobile ? '100%' : '500px',
// 		maxWidth: '90vw'
// 	}
// })

// 关闭模态框，通知父组件更新状态
const handleClose = () => {
	emit('update:isVisible', false)
}

// 提交表单
const handleSubmit = async () => {
	if (!campaignName.value) {
		showWarning(t('agent.activity.EnterCampaignName'))
		return
	}

	try {
		loading.value = true
		const response = await createCampaign({
			userId: userId.value!,
			name: campaignName.value,
			inviteCode: campaignCode.value
		})
		if (response.code !== 200) {
			showError(response.message)
			return
		}
		if (response.code === 200) {
			emit('submit', {
				name: campaignName.value,
				code: campaignCode.value,
				refresh: true
			})
			handleClose()
			showSuccess(t('agent.activity.CreateSuccess'))
		}
	} catch (error) {
		console.error('创建失败:', error)
		showError(t('agent.activity.CreateFailed'))
	} finally {
		loading.value = false
	}
}

// 监听 props.isVisible 的变化，自动生成邀请码
watch(
	() => props.isVisible,
	async (val: boolean) => {
		localVisible.value = val
		if (val) {
		}
	}
)

// 验证表单是否有效
const isFormValid = computed(() => {
	return campaignName.value.trim() !== '' && campaignCode.value.trim() !== ''
})
</script>

<style scoped>
/* 可根据项目需求添加自定义样式 */
.button-create {
	border-radius: 25px;
	background-color: #7864ff;
	color: #fff;
	margin-top: 10px;
}
</style>
